<template lang="html">
  <div class="more">
     <div class="collection-block">
      <div class="block-padding">
        <h3>热门分类</h3>
        <div class="wrapper row is-justify-top row--flex">
          <div class="line col col-4">
            <div class="item1" @click="getMusicType({title:'流行',value:1},$event)">流行</div>
          </div>
          <div class="line col col-4" >
            <div class="item2 tag" @click="getMusicType({title:'民谣',value:2},$event)">民谣</div>
            <div class="item3 tag" @click="getMusicType({title:'儿歌',value:11},$event)">儿歌</div>
          </div>
          <div class="line col col-4">
            <div class="item4 tag" @click="getMusicType({title:'网络歌曲',value:12},$event)">网络歌曲</div>
            <div class="item5 tag" @click="getMusicType({title:'器乐',value:24},$event)">器乐</div>
          </div>
        </div>
      </div>
    </div>

    <!-- list -->
    <div class="collection-block">
      <div class="block-padding">
        <div class="wrapper_head ">
          <div class="col col-6">
            <h3>{{ type.title }}</h3>
          </div>
        </div>

        <div class="clearfix">
          <div class="image-wrapper" v-for="(item,index) in musicData" :key="index">
            <img :src="item.pic_big" >
              <div class="musicinfo">
                <div class="tag">{{ item.album_title }}</div>
                <div class="title">{{ item.title }}</div>
              </div>
          </div>
        </div>
        <div v-show="markFlag" class="mark">等待加载数据...</div>
        <div class="th-infinite-loading-container">
	      <div @click="getMoreHandler" class="infinite-status-click">查看更多...</div>
	    </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
	name:"more",
	data(){
		return{
            type:{
	         title:"流行",
	         value:"1"
		    },
           musicData:[],
           markFlag:true,
           offset:0,
           size:6
		}
	},
	mounted(){
       this.getMusicInfo()
	},
	methods:{
		// 更换类型
		getMusicType(value,event){
		   this.markFlag=true
           this.type=value
           this.getMusicInfo()
            this.musicData = [];
		},
		getMoreHandler(){
		   this.getMusicInfo()
		   this.markFlag = true
		 },
		 getMusicInfo(){
		 	this.$axios.get(this.HOST+"/v1/restserver/ting",{
		 		params:{
		 		  method:"baidu.ting.billboard.billList",
		          type:this.type.value,
		          size:this.size,
		          offset:this.offset
		 		}
		 	}).then(res =>{
		 		this.markFlag = false;
		 		var allData=this.musicData.concat(res.data.song_list)
		 		this.musicData=allData
		 		console.log(this.offset)
		 		this.offset=this.offset+=this.size
		 		console.log(this.offset)
		 	}).catch(error=>{
		 		console.log(error)
		 	})
		 }
	}
}
</script>

<style lang="css" scoped>
.more{
  width: 100%;
}

.collection-block{
  padding-bottom: 10px;
}

.block-padding{
  padding: 10px 17px;
  background-color: #fff;
}

.block-padding h3{
  font-size: 20px;
  line-height: 38px;
}

.is-justify-top {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.row{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.wrapper .line{
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: 15px;
    color: #e13228;
}

.col-4{
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}

.item1 {
    background: #f6f1f1;
    border-right: 1px solid #fff;
}

.wrapper .tag{
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 15px;
}

.item2 {
    background-color: #efebeb;
    border-bottom: 1px solid #fff;
}

.item3, .item4 {
    background-color: #f6f1f1;
    border-right: 1px solid #fff;
}

.item5 {
    background-color: #efebeb;
}

.image-wrapper{
  float: left;
  width: 50%;
  padding: 5px;
  box-sizing: border-box;
}

.musicinfo .tag{
  font-size: 12px;
  width :50%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #999;
  padding-bottom: 5px;
}
.musicinfo .title{
  font-size: 15px;
  width :50%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.mark{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0,0,0,0.8);
  color:#fff;
  font-size: 20px;
  text-align: center;
}

.th-infinite-loading-container{
  background: #fff;
  height: 50px;
  line-height: 50px;
}

.th-infinite-loading-container .infinite-status-click{
  text-align: center;
}
</style>
